Skip to content

feat(files): expand file editor to support more formats, add docx/xlsx preview#3971

Merged
waleedlatif1 merged 11 commits intostagingfrom
waleedlatif1/docx-inline-edit
Apr 5, 2026
Merged

feat(files): expand file editor to support more formats, add docx/xlsx preview#3971
waleedlatif1 merged 11 commits intostagingfrom
waleedlatif1/docx-inline-edit

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

Summary

  • Add ~40 new text-editable file extensions (js, ts, py, go, rs, sql, xml, toml, dockerfile, etc.)
  • Add DOCX preview using mammoth.js (converts to HTML, renders in sandboxed iframe)
  • Add XLSX preview using SheetJS (lazy-parses active sheet, renders as table with sheet tabs, caps at 10k rows)
  • Extract shared helpers (PreviewError, DOCUMENT_SKELETON, resolvePreviewError) to reduce duplication across preview components

Type of Change

  • New feature

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@gitguardian
Copy link
Copy Markdown

gitguardian bot commented Apr 5, 2026

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
While these secrets were previously flagged, we no longer have a reference to the
specific commits where they were detected. Once a secret has been leaked into a git
repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.


🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Apr 5, 2026 4:07am

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 5, 2026

PR Summary

Medium Risk
Expands the set of uploadable/editable file types and adds new client-side DOCX/XLSX preview rendering paths, which can impact security/performance and needs validation across browsers and large files.

Overview
Expands supported file types by introducing SUPPORTED_CODE_EXTENSIONS and wiring it into workspace upload allowlists (/api/files/upload) and the Files UI accept filter, plus broadening what the editor treats as text-editable (by MIME type and extension).

Adds new previews for docx (client-side conversion to HTML rendered in a sandboxed iframe via mammoth) and xlsx (client-side parsing via xlsx with sheet tabs and row truncation), and refactors shared UI pieces by extracting a reusable DataTable and consolidating preview error/loading UI helpers.

Tightens/adjusts validation logic by replacing path.extname usage with a local extractExtension() helper in upload validation utilities, and updates the upload route test to assert rejection of an arbitrary unsupported extension (.exe).

Reviewed by Cursor Bugbot for commit 6c4b02e. Configure here.

@waleedlatif1 waleedlatif1 force-pushed the waleedlatif1/docx-inline-edit branch from a8f6b74 to edc103d Compare April 5, 2026 02:23
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 5, 2026

Greptile Summary

This PR significantly expands the file editor and viewer by adding ~40 code-related extensions to the text-editable set (js, ts, py, go, rs, sql, xml, toml, dockerfile, etc.) and introduces rich DOCX preview (mammoth.js converting to HTML rendered in a sandboxed iframe) and XLSX preview (SheetJS lazily parsing sheets into a table with per-sheet tabs, capped at 1,000 rows). Shared helpers (PreviewError, DOCUMENT_SKELETON, resolvePreviewError) are correctly extracted and reused across all preview types. Previously flagged concerns — ArrayBuffer/Uint8Array type mismatch in XLSX.read, redundant instanceof Error check in resolvePreviewError, and the allow-same-origin in the DOCX sandbox — are all resolved.

  • validation.ts: Adds SUPPORTED_CODE_EXTENSIONS (~40 extensions) cleanly alongside existing constants; no breaking changes
  • route.ts: Code extensions correctly added to ALLOWED_EXTENSIONS upload whitelist
  • file-viewer.tsx: New DocxPreview and XlsxPreview components; XLSX.read now correctly wraps ArrayBuffer in new Uint8Array(); P1buildDocxPreviewHtml uses background: transparent with hardcoded dark text color #e4e4e7, making DOCX content unreadable in light mode since the sandboxed iframe cannot inherit CSS variables
  • files.tsx: File input accept attribute updated to include code extensions

Confidence Score: 4/5

Requires one fix before merging: DOCX preview renders near-invisible light-gray text on a transparent background, which is unreadable in light mode

One confirmed P1 rendering defect in buildDocxPreviewHtml (transparent background + #e4e4e7 text = invisible in light mode) makes DOCX preview broken for all light-mode users. All other findings are P2 style issues that do not block functionality. All previously flagged P0/P1 concerns from earlier reviews are resolved.

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx — specifically the buildDocxPreviewHtml function's missing explicit background color

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx Adds DocxPreview (mammoth.js) and XlsxPreview (SheetJS); P1 — buildDocxPreviewHtml uses transparent background with light-gray text (#e4e4e7), making DOCX content unreadable in light mode
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx Unchanged in substance; PreviewPanel and its renderers (Markdown, HTML, CSV, SVG) continue working correctly
apps/sim/lib/uploads/utils/validation.ts Adds SUPPORTED_CODE_EXTENSIONS (~40 extensions) cleanly; no breaking changes to existing validation logic
apps/sim/app/api/files/upload/route.ts Code extensions correctly added to ALLOWED_EXTENSIONS upload whitelist; no other changes
apps/sim/app/api/files/upload/route.test.ts Good coverage for upload paths, security, and extension validation; redundant afterEach calls in two describe blocks violate project testing guidelines
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/data-table.tsx Minor additions; String() coercion for cell values handles non-string types from SheetJS safely
apps/sim/app/workspace/[workspaceId]/files/files.tsx Cleanly uses SUPPORTED_CODE_EXTENSIONS in file input accept attribute alongside existing extension arrays

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[FileViewer receives file + workspaceId] --> B[resolveFileCategory]
    B --> C{Category?}
    C -->|text-editable| D[TextEditor\ntextarea + PreviewPanel]
    C -->|iframe-previewable| E[IframePreview\nPDF via browser iframe]
    C -->|image-previewable| F[ImagePreview\nimg with zoom and pan]
    C -->|pptx-previewable| G[PptxPreview\npptxviewjs canvas rendering]
    C -->|docx-previewable| H[DocxPreview\nmammoth.js → HTML → iframe]
    C -->|xlsx-previewable| I[XlsxPreview\nSheetJS → DataTable]
    C -->|unsupported| J[UnsupportedPreview]

    H --> H1[useWorkspaceFileBinary]
    H1 --> H2[mammoth.convertToHtml arrayBuffer]
    H2 --> H3[buildDocxPreviewHtml wraps HTML]
    H3 -->|P1: background transparent| H4[iframe srcDoc sandbox empty]

    I --> I1[useWorkspaceFileBinary]
    I1 --> I2[XLSX.read new Uint8Array data]
    I2 --> I3[setSheetNames + workbookRef]
    I3 --> I4{activeSheet changes}
    I4 --> I5[sheet_to_json header 1\ncap at XLSX_MAX_ROWS 1000]
    I5 --> I6[DataTable + sheet tabs]

    D --> D1[PreviewPanel]
    D1 --> D2{resolvePreviewType}
    D2 -->|markdown| D3[MarkdownPreview]
    D2 -->|html| D4[HtmlPreview]
    D2 -->|csv| D5[CsvPreview → DataTable]
    D2 -->|svg| D6[SvgPreview]

    subgraph Shared[Shared Helpers]
        S1[resolvePreviewError]
        S2[PreviewError component]
        S3[DOCUMENT_SKELETON]
    end

    H -.uses.-> Shared
    I -.uses.-> Shared
    G -.uses.-> Shared
Loading

Reviews (4): Last reviewed commit: "lint" | Re-trigger Greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 13c4919. Configure here.

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

…perly

Reduces XLSX_MAX_ROWS from 10,000 to 1,000 to prevent browser sluggishness
on large spreadsheets. Types workbookRef with the proper xlsx.WorkBook
interface instead of unknown, removing the unsafe cast.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move SUPPORTED_CODE_EXTENSIONS to validation-constants.ts so client
  components no longer transitively import Node's `path` module
- Extract shared DataTable component used by both CsvPreview and
  XlsxPreview, eliminating duplicated table markup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ction

Replace `import path from 'path'` with a simple `extractExtension` helper
that does `fileName.slice(fileName.lastIndexOf('.') + 1)`. This removes
the only Node module dependency from validation.ts, making it safe to
import from client components without pulling in a Node polyfill.

Deletes the unnecessary validation-constants.ts that was introduced as
a workaround — the constants now live back in validation.ts where they
belong.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 6c4b02e. Configure here.

@waleedlatif1 waleedlatif1 merged commit 235f074 into staging Apr 5, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the waleedlatif1/docx-inline-edit branch April 5, 2026 16:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants